<template>
  <div class="hello container">
    <div class="">
      <h4><input type="text" name="" v-model="content" value="">
        <button class="btn btn-primary" @click="search(content)">搜索</button>
        <button class="btn btn-primary" @click="lock('blob:http://service-cdn.qiniuyun.net/e3414117e-41bd-43fb-9632-3f5ca1d5a100')">查询</button>

      </h4>
      <h5>{{content}}<span class="label label-default">搜索结果,最多仅展示15条</span></h5>
    </div>
    <div class="content container center-block" v-for="(item, index) in books" :key="index">
      <div class="waps_Name">{{item.waps_Name}}</div>
      <div class="waps-full">状态:{{item.waps_full}}</div>
      <div class="waps_sort">类型:{{item.waps_sort}}</div>
      <div class="status">最新章节:{{item.genxin.status}}</div>
      <div>作者:{{item.author}}</div>
      <button class="btn btn-primary" @click="download(item)">下载</button>
      <!-- <button class="btn btn-info" @click="downloadRead()">保存</button> -->
      <!-- <button class="btn btn-primary" @click="_delete()">删除</button> -->
      <!-- <button class="btn btn-success" @click="read(item, true)">在线阅读</button> -->
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import config from '../config/config'

  export default {
    name: 'hello',
    data () {
      return {
        content: '',
        books: config.books, // 保存搜索结果
        resource: true // 发起请求
      }
    },
    watch: {
      'content': function (val, oldVal) {
//        this.search(val)
      }
    },
    created () {},
    methods: {
      search: function (val) {
        console.log(val)
        axios.get(config.URL + '/api/books?content=' + val).then(res => {
          console.log(res)
          config.books = res.data
          this.books = config.books
        })
      },
      download: function (item) {
        if (this.resource) {
          this.read(item, false)
        }
        setTimeout(function () {
          axios.get(config.URL + '/api/download?reads=1').then(res => {
            console.log(res)
          })
        }, 2000)
      },
      downloadRead () {
//        this.$router.push({name: 'Download'})
        axios.get(config.URL + '/api').then(res => {
          console.log(res)
//          this.books = res.data
        })
      },
      read (item, next) {
        axios.get(config.URL + '/api/read?link=' + item.book_url + '&name=' + item.waps_Name + '-作者:' + item.author).then(res => {
          console.log(res)
          this.resource = true
          config.reads = res
          if (next) {
//            this.$router.push({name: 'Read', params: {books: res}})
          }
        })

//        if (config.author !== item.author) {
//          axios.get(config.URL + '/api/read?link=' + item.book_url).then(res => {
//            this.resource = false
//            config.reads = res
//            if (next) {
//              this.$router.push({name: 'Read', params: {books: res}})
//            }
//          })
//          config.author = item.author
//        } else {
//          if (next) {
//            this.$router.push({name: 'Read', params: {books: config.reads}})
//          }
//        }
      },
      _delete () {
        axios.get(config.URL + '/api/delete').then(res => {
          console.log(res)
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .content {
    margin: 15px 0;
    text-align: left;
  }

  .btn {
    cursor: pointer;
  }

  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: black;
    font-weight: 600;
    /*text-shadow: 1px 1px 1px rgba(255, 0, 0, 0.1);*/
    padding: 15px 15px;
    border: 1px solid black;
  }
</style>
